<template>
	<view class="container" :style="{'background': allBackground}">
		<image src="/static/fptc.jpg" class="bfnt_img"></image>
		<view class="page_title">
			<view class="page_title_1"></view>
			<view class="page_title_2"></view>
			<view class="page_title_3"></view>
			<text>年货盛宴</text>
			<view class="page_title_3"></view>
			<view class="page_title_2"></view>
			<view class="page_title_1"></view>
		</view>
		<view class="goods-list">
			<view v-for="(Goods, index) in MallGoodsList" :key="index" class="goods-item" @click="navToDetailPage(Goods.id)">
				<view class="image-wrapper">
					<image
						:src="Goods.logo"
						:class="[Goods.loaded]"
						mode="aspectFill"
						lazy-load
						@load="onImageLoad('MallGoodsList', index)"
						@error="onImageError('MallGoodsList', index)"
					></image>
				</view>
				<text class="title clamp">{{ Goods.title }}</text>
				<!-- <text class="sub-title clamp">型号：{{ Goods.GoodsModel }}</text> -->
				<view class="price-box">
					<text class="price">{{ Goods.price_market }}</text>
					<text>已售 {{ Goods.number_sales }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	components: {
	},
	data() {
		return {
			MallGoodsList: [],
			page:1,
			
			
			
			allBackground:'#f1b8e1'
		};
	},

	onLoad(options) {
		this.loadCateList(options);
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed';
		} else {
			this.headerPosition = 'absolute';
		}
		// plus.key.hideSoftKeybord();
	},

	//下拉刷新
	onPullDownRefresh() {
		this.MallGoodsList = [];
		this.page = 1
		this.loadData('refresh');
	},
	//加载更多
	onReachBottom() {
		console.log(87894684)
		this.page++
		this.loadData();
	},
	computed: {
		...mapState(['hasLogin'])
	},
	methods: {
		toBack(){
			uni.navigateBack();  
		},
		//第一次加载分类
		loadCateList(vm) {
			let goodList = {
				page:1,
				order: "desc",
				sort: "sales"
			}
			this.$Request.get(this.$api.prodect.getGoodList,goodList).then(
				res => {
					this.MallGoodsList = res.data.data;
				},
				err => {
					console.log('err: ' + JSON.stringify(err));this.$utils.showMsg(err.data.info);
				}
			);
		},
		//加载商品 ，带下拉刷新和上滑加载
		loadData(type = 'add', loading) {
			let that =this;
			//没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return;
				}
				this.loadingType = 'loading';
			} else {
				this.loadingType = 'more';
			}
			let params = {
				page:that.page,
				order: that.order,
				sort: that.sort
			};
			this.$Request.get(this.$api.prodect.getGoodList, params, true).then(
				res => {
					let goodsList = res.data.data;
					if (type === 'refresh') {
						this.MallGoodsList = goodsList;
					} else {
						this.MallGoodsList = this.MallGoodsList.concat(goodsList);
					}

					//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
					this.loadingType = this.MallGoodsList < 500 ? 'nomore' : 'more';
					if (type === 'refresh') {
						if (loading == 1) {
							// uni.hideLoading();
						} else {
							uni.stopPullDownRefresh();
						}
					}
				},
				err => {
					console.log('err: ' + JSON.stringify(err));this.$utils.showMsg(err.data.info);
				}
			);
		},
		//监听image加载完成
		onImageLoad(key, index) {
			this.$set(this[key][index], 'loaded', 'loaded');
		},
		//监听image加载失败
		onImageError(key, index) {
			this[key][index].DefaultPicURL = '/static/errorImage.jpg';
		},
		//详情
		navToDetailPage(item) {
			//为了模拟数据，正常项目里按照业务传值
			this.isNoHasLogin(item)
			// uni.navigateTo({
			// 	url: `/pages/product/detail?goods=${this.$utils.putExtra(item)}`
			// });
		},
		isNoHasLogin(item){
			let that = this;
			if (!that.hasLogin) {
				uni.showModal({
				    title: '登录',
				    content: '登录后才可以查看商品详情',
				    success: function (res) {
				        if (res.confirm) {
				            uni.navigateTo({
				            	url: '/pages/login/login'
				            });
				        } else if (res.cancel) {
				            // uni.switchTab({
				            // 	url: '/pages/tabBar/home'
				            // });
				        }
				    }
				});
			}else{
				uni.navigateTo({
					url: `/pages/product/detail?goods=${that.$utils.putExtra(item)}`
				})
			}
		},
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
	// 年货盛宴
	.page_title{
		display: flex;
		align-items: center;
		justify-content:center;
		.page_title_1{
			width:10rpx;
			height:10rpx;
			border-radius: 50%;
			background:#fff;
		}
		.page_title_2{
			width:15rpx;
			height:15rpx;
			border-radius: 50%;
			background:#fff;
			margin: 10rpx;
		}
		.page_title_3{
			width:20rpx;
			height:20rpx;
			border-radius: 50%;
			background:#fff;
		}
		text{
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
			margin: 10rpx;
		}
	}
	
/* 商品列表 */
.goods-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin: 2vw;

	.goods-item {
		display: flex;
		flex-direction: column;
		width: 30.5vw;
		padding-bottom: 40upx;
		background: #fff;
		margin-bottom: 2vw;
		border-radius: 10rpx;

		// &:nth-child(2n + 1) {
		// 	margin-right: 4%;
		// }
	}

	.image-wrapper {
		width: 100%;
		height: 200rpx;
		flex-shrink: 0;
		position: relative;

		image {
			border-radius: 8upx;
		}
	}

	.title {
		font-size: $font-lg;
		color: $font-color-dark;
	}

	.sub-title {
		font-size: $font-base;
		color: $font-color-dark;
		margin: 15rpx 0rpx 30rpx 0rpx;
	}

	.price-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 10upx;
		font-size: 24upx;
		color: $font-color-light;
	}

	.price {
		font-size: $font-lg;
		color: $uni-color-primary;
		line-height: 1;

		&:before {
			content: '￥';
			font-size: 26upx;
		}
	}
}
// 帮扶农特
	.bfnt_img{
		height: 260rpx;
		width: 100vw;
	}
</style>
